<template>
    <div class="amap-page-container" :style="{'height':height}">
        <el-amap :vid="'map-dispatch' + randomNum" :zoom="zoom" :mapStyle="mapStyle" :center="center" :plugin="plugin">
    <!--包裹-->
            <el-amap-marker
                v-for="(marker,index) in markers"
                :position="marker.position"
                :template="marker.template"
                :events="marker.events">
                <img src="../../../../../assets/img/weiqu@2x.png" style="z-index: 5" v-if="marker.type===10" class="point"
                     @click="getPointOrLine(marker.id)">
                <img src="../../../../../assets/img/Group15Copy@2x.png" style="position: relative;z-index: 5" v-else-if="marker.type==9" class="receipt-img">
                <img src="../../../../../assets/img/loding@2x.png" style="z-index: 5" v-else-if="marker.type==='bag'" class="point"
                     @click="getPointOrLine(marker.id)">
                <span v-else-if="marker.type === 'driver' " :class="['driver-name',{'show-driver':marker.checked===true}]">{{marker.name}}</span>
                <img src="../../../../../assets/img/jinji@2x.png" style="z-index: 5" v-else-if="!marker.template" class="point" @click="getPointOrLine(marker.id)">
                <!--<img src="../img/weiqu@2x.png" v-else class="point"-->
                     <!--@click="getPointOrLine(marker.id)">-->
                <span v-if="(!marker.status&&marker.type!='driver')" class="same-point">x{{(marker.sameMark&&marker.sameMark.length>0)?marker.sameMark.length+1:1}}</span>
            </el-amap-marker>
    <!--包裹-->
    <!--司机marker-->
            <el-amap-marker
                    v-if="showDriverList"
                    v-for="(marker,index) in driversData"
                    :vid="marker.id"
                    :position="[marker.lng, marker.lat]">
                <img src="../../../../../assets/img/Group7@3x.png" alt="" style="width: 60px;margin-left: -50%;position: relative;z-index: 1" @click="showDriver(marker.id, [marker.lng, marker.lat])">
                <div class='driver-n' style="z-index: 2" @click="showDriver(marker.id, [marker.lng, marker.lat])">{{marker.name}}</div>
            </el-amap-marker>
    <!--司机marker-->
    <!--接驳点-->
            <template v-for="(marker, index) in siteMarkers" v-if="isShowSite">
                <el-amap-marker
                        :vid="marker.id"
                        :position="marker.position"
                        :events="marker.events"
                        :visible="marker.visible"
                        :draggable="marker.draggable"
                        >
                    <img src="../../../../../assets/img/jiebodiadddddn@3x.png" alt="" class="marker-img">
                    <div class="marker-name">{{marker.name}}</div>
                </el-amap-marker>
            </template>
    <!--接驳点-->
    <!--包裹终点-->
            <el-amap-marker
                    v-if="showDriverList"
                    v-for="(marker,index) in flagData"
                    :vid="marker.id"
                    :position="marker.position">
                <img src="../../../../../assets/img/qizi@3x.png" alt="" style="width: 16px;position: relative;left: 6px;top: 10px;z-index: 1">
                <!--<div class='driver-n' @click="showDriver(marker.id, [marker.lng, marker.lat])">{{marker.name}}</div>-->
            </el-amap-marker>
    <!--包裹终点-->
            <el-amap-polyline
                v-for="(line,index) in polyLines.path"
                :path="line.path"
                strokeColor="#ff0004"
                strokeWeight=3
                strokeStyle="dashed">
            </el-amap-polyline>
    <!--司机对应任务-->
            <template v-for="(polys,index) in driverTask" v-if="driverTask">
                <el-amap-polyline
                        v-if="showDriverList"
                        v-for="(line,index) in polys"
                        :path="line.path"
                        strokeColor="blue"
                        strokeWeight=3
                        strokeStyle="dashed">
                </el-amap-polyline>
            </template>
    <!--司机对应任务-->
    <!--区域-->
            <template v-for="(polygon, index) in polygonsEdit" v-if="isShowArea">
                <el-amap-polygon
                        :path="polygon.path"
                        fillOpacity="0.1"
                        strokeOpacity="0.2"
                        :strokeColor="polygon.borderColor"
                        :fillColor="polygon.bgColor"
                        :draggable="polygon.draggable"
                        :editable="polygon.editable"
                        :events="polygon.events">
                </el-amap-polygon>
            </template>
    <!--区域-->
            <el-amap-info-window v-for="item in windows"
                 :position="item.position" :visible="item.visible"
                 :template="item.template" :events="item.events">
            </el-amap-info-window>

        </el-amap>

        <div class="tuceng">
            <el-select v-model="mapStyle" placeholder="请选择主题" style="width: 100px;margin-right: 10px;border: 1px solid #D8DCE6;">
                <el-option
                        v-for="item in themeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" @click="isShowSite = !isShowSite">接驳点</el-button>
            <el-button type="primary" @click="isShowArea = !isShowArea">区域</el-button>
        </div>
    </div>
</template>

<script>
    import { lazyAMapApiLoaderInstance } from 'vue-amap';
    import color from '../../../../../init/color.js';  // 颜色js
    // import bus from '../../../dispatchManagement/mapBus';
    // import VueAMap from "vue-amap";
    export default {
        data() {
            return {
                map: null,
                randomNum: Math.floor(Math.random() * 1000000000000000 + 1),
                siteMarkers: [], // 接驳点信息
                polygonsEdit: [], // 区域信息
                isShowSite: false,
                isShowArea: true,
                mapStyle: 'amap://styles/whitesmoke',
                themeData: [
                    {
                        label: '标准',
                        value: 'amap://styles/normal'
                    },
                    {
                        label: '远山黛',
                        value: 'amap://styles/whitesmoke'
                    },
                    {
                        label: '幻影黑',
                        value: 'amap://styles/dark'
                    },
                    {
                        label: '月光银',
                        value: 'amap://styles/light'
                    },
                    {
                        label: '草色青',
                        value: 'amap://styles/fresh'
                    },
                    {
                        label: '雅士灰',
                        value: 'amap://styles/grey'
                    },
                    {
                        label: '涂鸦',
                        value: 'amap://styles/graffiti'
                    },
                    {
                        label: '马卡龙',
                        value: 'amap://styles/macaron'
                    },
                    {
                        label: '靛青蓝',
                        value: 'amap://styles/blue'
                    },
                    {
                        label: '极夜蓝',
                        value: 'amap://styles/darkblue'
                    },
                    {
                        label: '酱籽',
                        value: 'amap://styles/wine'
                    }
                ],
                zoom: 12,
                // center: [114.0370500, 22.5638910],
                center: [],
                polyLines: {
                    path: [],
                    editable: false
                },
                poly: [], // 司机对应任务连线
                plugin: [
                    {
                    pName: 'MapType',
                    defaultType: 0,
                    events: {
                        init(o) {
                            console.log(o);
                        }
                    }
                }
                ]
            };
        },
        props: {
            markers:{
                type:Array,
                default: ()=>{
                    return []
                }
            },
            showDriverList:{
                type:Boolean,
                default: true
            },
            driversData:{
                type:Array,
                default: ()=>{
                    return []
                }
            },
            flagData:{
                type:Array,
                default: ()=>{
                    return []
                }
            },
            siteData:{
                type:Array,
                default: ()=>{
                    return []
                }
            },
            areaData:{
                type:Array,
                default: ()=>{
                    return []
                }
            },
            windows:{
                type:Array,
                default: ()=>{
                    return []
                }
            },
            driverTask: {  // 司机任务一一对应连线
                type:Array,
                default: ()=>{
                    return []
                }
            },
            companyDriver: {  // 连队id 或者 车队id
                type:Array,
                default: ()=>{
                    return []
                }
            },
            height: {
                type: String,
                default: '100%'
            }
        },
        mounted() {
            this.center = JSON.parse(localStorage.getItem('lnglat'));

            setTimeout(() => {
                this.initArea();
                this.initSite();
            }, 500);


        },
        methods: {
            initSite() {
                const self = this;
                self.siteMarkers = [];
                for (let key in self.siteData) {
                    self.siteMarkers.push({
                        position: [self.siteData[key].lon,self.siteData[key].lat],
                        events: {
                            click: () => {
                                // self.$router.push('/dialog/show/express.spot/' + self.siteData[key].id);
                            }
                        },
                        name: self.siteData[key].name,
                        visible: true,
                        draggable: false
                    });
                }
            },
            initArea() {  // 初始化地图
                const self = this;
                self.polygonsEdit = [];
                for (let key in self.areaData) {
                    self.polygonsEdit.push({
                        editable: false,
                        id: self.areaData[key].id,
                        contentRender: self.areaData[key].name,
                        draggable: false,
                        bgColor: color[key],
                        borderColor: color[key],
                        path: self.areaData[key].area ? JSON.parse(self.areaData[key].area) : [],
                        events: {
                            click: () => {
                            }
                        }
                    });
                }
            },
            //点,路线显示控制，当前货物id
            getPointOrLine(id) {
                this.$emit("getPointOrLine",id,true);
            },
            //自定义模板的evt传递，当前货物id
            // templateClick(id){
            //     bus.$emit('click',id);
            // },
            addLine(position, lastPositon, sendId) {
                console.info('dddddddddd');
                let lineId=Date.now()-new Date("2018/01/01").getTime()+''+sendId;
                let marker = {
                    position: lastPositon,
                    type: 9,
                    sendId:sendId,
                    id:lineId,
                    template:""
                };
                let line = {
                    path: [position, marker.position],
                    id:lineId
                };
                this.markers.push(marker);
                this.polyLines.path.push(line);
            },
            removeLine(id){
                let lineId;
                for(let i=0,length=this.markers.length;i<length;i++){
                    if(this.markers[i]['sendId']==id){
                        lineId=this.markers[i]['id'];
                        this.markers.splice(i,1);
                        break;
                    }
                }
                for(let i=0,length=this.polyLines.path.length;i<length;i++){
                    if(this.polyLines.path[i]['id']==lineId){
                        this.polyLines.path.splice(i,1);
                        break;
                    }
                }
            },
            clearLines(){
              this.polyLines.path=[];
            },
            showDriver(driverId, lnglat) {
                this.$emit("showDriver", driverId, lnglat, true);
            }
        }
    };
</script>

<style lang="less" scoped>
    .amap-page-container {
        height: 100%;
        .marker-img{
            width: 40px;
            position: relative;
            top: -20px;
        }
        .marker-name{
            position: absolute;
            white-space: nowrap;
            width: 200%;
            color: red;
            top: -40px;
            left: -20px;
            text-align: center;
        }
        .driver-n{
            width: 100%;
            position: absolute;
            top: 0px;
            left:-50%;
            text-align: center
        }
        .olor-red{
            color: red;
        }
        .point {
            cursor: pointer;
            position: absolute;
            left: -10px;
            top: 12px;
            background-color: #fff;
            width: 40px;
            height: 40px;
            overflow: hidden;
            border-radius: 20px;
        }
        .same-point{
            font-size: 18px;
            color: #4A4A4A;
            letter-spacing: 0;
            display: block;
            position: absolute;
            top: -6px;
            left: -10px;
            width: 40px;
            text-align: center;
        }
        .mission-box{
            padding-bottom: 10px;
            transform: translateX(-45%);
            background: url(../../../../../assets/img/zhizhen@2x.png) no-repeat center bottom;
            background-size: 13px 7px;
            p{
                background-color: #3b8fe3;
                padding:4px;
                border-radius: 4px;
                color:#fff;
                white-space:nowrap;
                font-size: 12px;
                span{
                    color:#3b8fe3;
                    background-color: #fff;
                    padding: 2px;
                    border-radius: 4px;
                }
            }
        }
        .receipt-img {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 0px;
            top: 20px;
        }
        .driver-name {
            font-size: 14px;
            width: 60px;
            padding-top: 2px;
            height: 40px;
            text-align: center;
            position: absolute;
            z-index: 99;
            left: -20px;
            top: 10px;
            background: url(../../../../../assets/img/Group7@3x.png) no-repeat center bottom;
            background-size: contain;
        }
        .show-driver{
            border: 2px dashed #008b7d;
            border-radius: 15px;
        }
    }
</style>
